@import "../../../themes/basic/base-all.less";

:host {
  --ti-date-panel-picker-header-height: 18px;
  --ti-date-panel-picker-month-height: var(--ti-common-size-8x);
  --ti-date-panel-picker-icon-width: var(--ti-common-size-4x);
  --ti-date-panel-month-line-width: var(--ti-common-size-6x);
  --ti-date-panel-picker-week-height: 18px;
  --ti-date-panel-year-line-width: 30px;
  --ti-date-panel-day-line-width: var(--ti-common-size-3x);
  --ti-date-panel-day-container-width: var(--ti-common-size-9x);
  --ti-date-panel-day-container-height: var(--ti-common-size-6x);
  --ti-date-panel-picker-month-width: calc((var(--ti-date-panel-day-container-width) * 7) / 4);
  --ti-date-panel-picker-line-bottom: var(--ti-common-space-base); //年月面板当前日期的下划线bottom
  --ti-date-panel-day-picker-line-bottom: 2px; // 日期面板当前日期的下划线bottom
}
/**
 * 当前日期状态下划线样式
 */
 .date-underline(@date-underline-bottom; @date-underline-left; @date-underline-width) {
  position: relative;
  &:after{
    content: "";
    position: absolute;
    bottom: @date-underline-bottom;
    left: @date-underline-left;
    width: @date-underline-width;
    height: 1px;
    background: var(--ti-common-color-line-active);
  }
}

.ti3-date-picker-header {
    height: var(--ti-date-panel-picker-header-height);
    line-height: var(--ti-date-panel-picker-header-height) ;
    margin: var(--ti-common-space-3x) var(--ti-common-space-0);
    position: relative;
    font-size: var(--ti-common-font-size-base);
    .box-sizing(content-box);
}

.ti3-date-picker-icons-prev,
.ti3-date-picker-icons-next {
  position: absolute;
  width: calc(var(--ti-date-panel-picker-icon-width)*2 + var(--ti-common-space-10));
  height: var(--ti-date-panel-picker-header-height);
  line-height: var(--ti-date-panel-picker-header-height);
  cursor: pointer;
  display: block;
  top: 0px;
  padding: 0;
  font-size: var(--ti-common-font-size-base);
  color: var(--ti-common-color-icon-normal);
  text-align: right;
  .box-sizing(border-box);
  .ti3-icon {
    width: var(--ti-date-panel-picker-icon-width);
    display: inline-block;
    text-align: center;
    &:hover,
    &:active {
      color: var(--ti-common-color-icon-hover);
    }
  }
}

.ti3-date-picker-icons-prev {
    left: 0px;
    text-align: left;
    padding-left: var(--ti-common-space-10);
}

.ti3-date-picker-icons-next {
  right: 0px;
  text-align: right;
  padding-right: var(--ti-common-space-10);
}



/* 上下键灰化的样式 */
.ti3-date-state-disabled {
    cursor: not-allowed !important;
    color: var(--ti-common-color-icon-disabled) !important;
}

  /* 下拉面板头部中间年月文本样式 */
.ti3-header-year-month-picker {
  margin: var(--ti-common-space-0) calc((var(--ti-date-panel-day-container-width) * 7 - (166px - 2px)) / 2);
}

.ti3-date-picker-year-month {
    font-weight: var(--ti-common-font-weight-7);
    color: var(--ti-common-color-text-primary);
    background-color: var(--ti-common-color-bg-white-normal);
    cursor: pointer;
    .user-select();

    & span:hover{
      color: var(--ti-common-color-text-highlight);
    }
  }

  .ti3-date-picker-year-month-text {
    text-align: center;
  }

  .ti3-date-picker-container {
    .clearfix();
    background-color: var(--ti-common-color-bg-white-normal);
    font-size: var(--ti-common-font-size-base);
    th {
      font-weight: var(--ti-common-font-weight-4);
    }
    &.ti3-date-picker-year,
    &.ti3-date-picker-month {
      margin-top: 42px;
    }
  }



  /**
 * 下拉面板中间周、日表格样式
 */
.ti3-date-week {
  height: var(--ti-date-panel-picker-week-height);
  background-color: var(--ti-common-color-bg-white-normal);
  color: var(--ti-common-color-text-disabled);
  text-align: center;
  border: 0;
  font-weight: var(--ti-common-font-weight-4);
  .user-select();
}

.ti3-date-day-tr {
  height: var(--ti-date-panel-day-container-height);
}

.ti3-date-today-current-td {
  position: relative;
}

.ti3-date-current-day {
  background-color: var(--ti-common-color-bg-emphasize);
  color: var(--ti-common-color-text-white);
  text-align: center;
  line-height: var(--ti-date-panel-day-container-height);
  cursor: pointer;
  display: block;
  text-decoration: none;
  padding: var(--ti-common-space-0);
  margin-top: var(--ti-common-space-10);
  height: var(--ti-date-panel-day-container-height);
  min-width: var(--ti-date-panel-day-container-width);
  .box-sizing(border-box);
  .user-select();
}

.ti3-dateRange-select-day {
  background-color: var(--ti-common-color-bg-light-normal);
  color: var(--ti-common-color-text-primary);
  text-align: center;
  line-height: var(--ti-date-panel-day-container-height);
  cursor: pointer;
  display: block;
  text-decoration: none;
  padding: var(--ti-common-space-0);
  margin-top: var(--ti-common-space-10);
  height: var(--ti-date-panel-day-container-height);
  min-width: var(--ti-date-panel-day-container-width);
  .box-sizing(border-box);
  .user-select();

  &:hover{
    background-color: var(--ti-common-color-bg-light-emphasize);
  }
}

.ti3-date-default-day {
  background-color: var(--ti-common-color-bg-white-normal);
  color: var(--ti-common-color-text-primary);
  text-align: center;
  line-height: var(--ti-date-panel-day-container-height);
  font-size: var(--ti-common-font-size-base);
  cursor: pointer;
  display: block;
  text-decoration: none;
  padding: var(--ti-common-space-0);
  height: var(--ti-date-panel-day-container-height);
  margin-top: var(--ti-common-space-10);
  min-width: var(--ti-date-panel-day-container-width);
  .box-sizing(border-box);
  .user-select();

  &:hover{
    background-color: var(--ti-common-color-bg-white-emphasize);
    color: var(--ti-common-color-text-highlight);
  }
}

.ti3-date-today {
  &.ti3-date-current-day {
    border: 0;
    background-color: var(--ti-common-color-bg-emphasize);
  }
  .date-underline(var(--ti-date-panel-day-picker-line-bottom); calc((var(--ti-date-panel-day-container-width) - var(--ti-date-panel-day-line-width))/2); var(--ti-date-panel-day-line-width))
}

.ti3-date-disable-day {
  background-image: none;
  color: var(--ti-common-color-line-normal);
  text-align: center;
  line-height: var(--ti-date-panel-day-container-height);
  font-size: var(--ti-common-font-size-base);
  display: block;
  text-decoration: none;
  background-color: var(--ti-common-color-bg-disabled);
  padding: var(--ti-common-space-0);
  margin-top: var(--ti-common-space-10);
  height: var(--ti-date-panel-day-container-height);
  min-width: var(--ti-date-panel-day-container-width);
  cursor: not-allowed;
  .box-sizing(border-box);
  .user-select();
}

/* 相邻月份的天变为浅灰色 */
.ti3-date-beside-day {
  color: var(--ti-common-color-text-disabled);
  text-align: center;
  line-height: var(--ti-date-panel-day-container-height);
  font-size: var(--ti-common-font-size-base);
  cursor: pointer;
  display: block;
  text-decoration: none;
  padding: var(--ti-common-space-0);
  margin-top: var(--ti-common-space-10);
  height: var(--ti-date-panel-day-container-height);
  min-width: var(--ti-date-panel-day-container-width);
  .box-sizing(border-box);
  .user-select();
  &:hover {
    background-color: var(--ti-common-color-bg-disabled);
  }
}


/* 设置月、年面板的样式: */
.ti3-date-month, .ti3-date-year {
  text-align: center;
  line-height: var(--ti-date-panel-picker-month-height);
  cursor: pointer;
  display: block;
  text-decoration: none;
  height: var(--ti-date-panel-picker-month-height);
  width: var(--ti-date-panel-picker-month-width);
  .box-sizing(border-box);
  .user-select();
}

.ti3-date-default-month, .ti3-date-default-year {
  background-color: var(--ti-common-color-bg-white-normal);
  color: var(--ti-common-color-text-secondary);

  &:hover{
    color: var(--ti-common-color-text-highlight);
    background-color: var(--ti-common-color-bg-white-emphasize);
  }
}

.ti3-date-current-month, .ti3-date-current-year {
  background-color: var(--ti-common-color-bg-emphasize);
  color: var(--ti-common-color-text-white);
}

.ti3-date-disable-month, .ti3-date-disable-year{
  background-color: var(--ti-common-color-bg-disabled);
  color: var(--ti-common-color-line-normal);
  cursor: not-allowed;
}

.ti3-date-select-month, .ti3-date-select-year {
  background-color: var(--ti-common-color-bg-light-normal);
  color: var(--ti-common-color-text-primary);
  &:hover {
    background-color: var(--ti-common-color-bg-light-emphasize);
  }
}

.ti3-date-preNext-year{
  background-color: var(--ti-common-color-bg-white-normal);
  color:var(--ti-common-color-text-disabled);
}

::ng-deep .ti3-datepanel-time-select-container {
  display: flex;
  height: 265px;
  width: 250px;
  border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-dividing);
  border-bottom: none;
  margin-top: var(--ti-common-space-10);
  .box-sizing(content-box);
  & ul {
      width: 100%;
      height: 231px;
      overflow-y: auto;
      text-align: center;
      & li {
        text-align: center !important;
        margin-top: 0 !important;
    }
  }
}

.ti3-time-minuteselect-container,
.ti3-time-hourselect-container,
.ti3-time-secondselect-container {
  flex: 1;
  & ti-list {
    width: 100%;
  }
}

.ti3-time-select-title {
  width: 100%;
  display: inline-block;
  margin-left: calc(-1 * var(--ti-common-space-6));
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: var(--ti-common-font-size-base);
  color: var(--ti-common-color-text-darkbg);
}
.ti3-endtime-select-container,
.ti3-time-select-panel {
  display: flex;
}
.ti3-endtime-select-container {
  margin-left: var(--ti-common-space-5x);
}
.ti3-endtime-select-none {
  display: none;
}

.ti3-date-picker-text {
  padding-left:58px;
  display: inline;
}
.ti3-date-picker-endpanel-text {
  padding-left: 204px;
  display: inline;
}

.ti3-time-minuteselect-container,
.ti3-time-hourselect-container {
  border-right: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-dividing);
}

.ti3-date-year-month-picker-container {
  display: flex;
  margin-bottom: var(--ti-common-space-8x);
  justify-content: space-around;
}

.ti3-time-select-container-border {
  border-bottom: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-dividing);
}

.ti-date-nowMonth {
  .date-underline(var(--ti-date-panel-picker-line-bottom); calc((var(--ti-date-panel-picker-month-width) - var(--ti-date-panel-month-line-width))/2); var(--ti-date-panel-month-line-width));
}

.ti-date-nowYear {
  .date-underline(var(--ti-date-panel-picker-line-bottom); calc((var(--ti-date-panel-picker-month-width) - var(--ti-date-panel-year-line-width))/2); var(--ti-date-panel-year-line-width));
}

.ti3-date-picker-only-year-container,
.ti3-date-picker-year-month-container {
  display: flex;
}

.ti3-date-picker-right-zone {
  padding-left: var(--ti-common-space-5x);
}

.ti3-date-quarter{
  width: calc((7 * var(--ti-common-size-9x) / 2));
  height: var(--ti-common-size-16x);
  margin-bottom: var(--ti-common-space-8x);
  line-height: var(--ti-common-size-16x);
  text-align: center;
  display: inline-block;
  color: var(--ti-common-color-text-primary);
  cursor: pointer;
  &:hover{
    color: var(--ti-common-color-text-highlight);
    background-color: var(--ti-common-color-bg-white-emphasize);
  }

}
.ti3-date-quarter{
  &.ti3-date-quarter-disable {
    color: var(--ti-common-color-text-disabled);
    background-color: var(--ti-common-color-bg-disabled);
    cursor: not-allowed;
    &:hover {
      color: var(--ti-common-color-text-disabled);
    }
  }
  &.ti3-date-quarter-current {
    background-color: var(--ti-common-color-bg-emphasize);
    color: var(--ti-common-color-text-white);
  }
  &.ti3-date-quarter-select {
    color: var(--ti-common-color-text-primary);
    background-color: var(--ti-common-color-bg-light-normal);
    &:hover {
      background-color: var(--ti-common-color-bg-light-emphasize);
    }
  }
}

.ti3-date-quarter-top {
  margin-top: 30px;
}

.ti3-date-picker-quarter-container {
  width: calc(7 * var(--ti-common-size-9x));
}
